<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/10/30
  Time: 13:49
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
</head>

<%--导入layui--%>
<script type="text/javascript" src="<c:url value="/res/tool/layui/layui.js"/>"  charset="utf-8"></script>

<link type="text/css" href="<c:url value="/res/tool/layui/css/layui.css"/> "  rel="stylesheet"/>

<%--导入jq--%>
<script type="text/javascript" src="<c:url value="/res/js/jquery-3.4.1.js"/> " charset="utf-8"></script>


<body>

<div  class="layui-card" >
    <form class="layui-form" action="<%=request.getContextPath()%>/rental/init" method="post">
    <div class="layui-card-header"><h2>房屋租赁管理/租赁管理</h2>
      </div>
    <div class="layui-card-body">
        <h1>租赁管理</h1>
    <hr/>
        房间名称:<input   name="fjname" type="text" class="layui-input" style="width: 250px;font-size:small;
        display: inline;" placeholder="请输入">
        收费状态:<select  name="fjzt" lay-ignore class="layui-input" style="display: inline;width: 250px;">
            <option value="">请选择</option>
            <option value="0">未出租</option>
            <option value="1">已出租</option>
        </select>


    &emsp;<button  lay-submit  lay-filter="select" class="layui-btn layui-btn-normal layui-btn-sm"  style="margin-left: 20px;"
    >查询</button>
        <button class="layui-btn layui-btn-primary layui-btn-sm"  onclick="cz()">重置</button>
    <br>
        <br>
    </div>
    </form>
        <div>
    <button id="czu" class="layui-btn layui-btn-normal layui-btn-sm" > 出租</button>
    <button  id="xy" class="layui-btn layui-btn-primary layui-btn-sm" >续租</button>
    <button id="tz" class="layui-btn layui-btn-primary layui-btn-sm" > 退租</button>
    <button id="jy" class="layui-btn layui-btn-primary layui-btn-sm" >解约</button>


    <button id="del" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="">删除</button>
            </div>



        <br>
        <br>


            <table id="demo" lay-filter="test"  ></table>




</div>
</div>
</div>


</body>
<script src="<c:url value="/res/tool/layui/layui.js"/>"></script>
<script type="text/javascript">

    layui.use('table', function(){

        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            ,method:'post'
            ,height: 280

            ,url: '<%=request.getContextPath()%>/rental/table' //数据接口
            ,where: {
                <c:if test="${!empty fjname}">"fjname":'${fjname}',</c:if>
                <c:if test="${!empty fjzt}">"fjzt":${fjzt}</c:if>

            }
            ,id:'rlist'
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,limit:5 //一页显示多少条
                ,limits:[5,10,15]//每页条数的选择项
                ,groups: 2 //只显示 2 个连续页码
                ,first: "首页" //不显示首页
                ,last: "尾页" //不显示尾页

            }

            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0 ,//解析接口状态
                    "msg":"",
                    "count":${count},
                    data:res


                };}

            ,width:1153
            // ,height:''
            // ,limit:''//显示条数
            //,limits:''//每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。 注意：优先级低于 page 参数中的 limits 参数
            ,cols: [[ //表头
                {filed:'id',width:40,fixed: 'left',type:'checkbox'}
                ,{field: 'id', title: '房间编号', width:85,  sort: true}
                ,{field: 'fjname', title: '房间名称', width:105 ,sort: true}
                ,{field: 'guishu', title: '归属楼栋', width:105, sort: true}
                ,{field: 'fjleixin', title: '房间类型', width:95 ,sort: true}
                ,{field: 'fjmj', title: '房间面积', width: 95 ,sort: true}
                ,{field: 'zhuangtai', title: '房间状态', width: 105, sort: true}
                ,{field: 'miaoshu', title: '房间描述', width: 115, sort: true}
                ,{field: 'sfleixin', title: '收费金额', width: 100,sort: true}

                ,{field: 'date', title: '收费日期', width: 100, sort: true}
                ,{field: 'yhxinxi', title: '租户信息', width: 100, sort: true}
                ,{field: 'adname', title: '操作员', width: 90, sort: true}
            ]]
        });
  //复选框监听
        table.on('checkbox(test)', function(obj){
            console.log(obj.checked);//当前是否选中状态
             //获取数据id   zulin id
            var layer = layui.layer;
            var id=new Array();
            id= obj.data.id
            if(obj.checked==true){//选中复选框


                //删除按钮点击

              var id=obj.data.id;
           console.log(obj.data);
           console.log(id);

                $("#del").click(function () {

                    $.ajax({
                        type:"post",
                        traditional: true,
                        url:"<%=request.getContextPath()%>/rental/del",
                        data:{
                            "id":id//将id传给后台
                        },
                        dataType:"json",
                        success:function (result) {
                            window.location.reload();
                            layer.msg('成功');

                        },

                    });




                });
                //点击续约
                $("#xy").click(function () {


                    layer.msg('续约成功');

                });
                //点击退租
                $("#tz").click(function () {
                    $.ajax({
                        type:"post",
                        traditional: true,
                        url:"<%=request.getContextPath()%>/rental/tz",
                        data:{
                            "id":id//将id传给后台
                        },
                        dataType:"json",
                        success:function (result) {
                            window.location.reload();


                        },

                    });


                });
                //解约
                $("#jy").click(function () {
                    $.ajax({
                        type:"post",
                        traditional: true,
                        url:"<%=request.getContextPath()%>/rental/tz",
                        data:{
                            "id":id//将id传给后台
                        },
                        dataType:"json",
                        success:function (result) {
                            alert("已经解约");
                            window.location.reload();


                        },

                    });


                });

            //出租事件点击
            //获取房间状态
                  $("#czu").click(function () {


                          $.ajax({
                              type:"post",

                              url:"<%=request.getContextPath()%>/rental/cz",
                              data:{
                                  "id":id//将id传给后台
                              },

                              dataType:"json",
                              success:function (result) {



                                      window.location.reload();



                              },

                          });
                  });
                $("#sfmx").click(function () {


                    $.ajax({
                        type:"post",

                        url:"<%=request.getContextPath()%>/rental/cz",
                        data:{
                            "id":id//将id传给后台
                        },

                        dataType:"json",
                        success:function (result) {
                         window.location.reload();

                        },

                    });

                });


            };


        });


    });

function cz() {
    window.location.reload();

}


</script>



</html>
